<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="assets/images/favicon.png" type="image/png">
    <title></title>
    <link href="assets/css/icons.css" rel="stylesheet">
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
    <link href="assets/css/responsive.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->

</head>

<body>


<!--Start login Section-->
<section class="login-section">
    <div class="container">
        <div class="row">
            <div class="login-wrapper">
                <div class="login-inner" id="app">

                    <div class="logo">
                        <img src="assets/images/logo-dark.png"  alt="logo"/>
                    </div>

                    <h2 class="header-title text-center">注册</h2>

                    <form>
                        <div class="form-group">
                            <input type="text" class="form-control"  placeholder="用户名" name="uname"   v-model ="uname" @blur="isUnameValid()">
                            <span :class="{'error': isError,'message': isMessage}">{{message}}</span>
                        </div>

                        <div class="form-group">
                            <input type="password" class="form-control" type="password"  name="upwd " placeholder="密码" >
                        </div>

                        <div class="form-group">
                            <div class="pull-left">
                                <div class="checkbox primary">
                                    <input  id="checkbox-1" type="checkbox">
                                    <label for="checkbox-1">I accept <a href="#">Terms and Conditions</a></label>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <input type="submit" value="注册" name="upwd" class="btn btn-primary btn-block" @click="reg()" >
                        </div>

                        <div class="form-group text-center">
                            Already have an account?  <a href="login.html">登陆 </a>
                        </div>

                    </form>

                </div>
            </div>

        </div>
    </div>
</section>
<!--End login Section-->




<!--Begin core plugin -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/plugins/moment/moment.js"></script>
<script  src="assets/js/jquery.slimscroll.js "></script>
<script src="assets/js/jquery.nicescroll.js"></script>
<script src="assets/js/functions.js"></script>
<!-- End core plugin -->
<script src="/cloudDisk/js/vue.js"></script>
<script src="js/axios.js"></script>
<script>
    let vm =new Vue({
        el:"#app",
        data:{
            uname:'',
            upwd:'',
            message:'用户名必须为6-10位以上数字字母下划线做成，且不能重名',
            isMessage:true,
            isError:false,
            isvalid:true //注册按钮是有效还是无效
        },methods:{
            isUnameValid:function () {
                let reg=/^\w{6,10}$/;
                if(!reg.test(this.uname)){
                    this.message="用户名必须为6-10位以上数字字母下划线组成";
                    this.isError=true;
                    this.isvalid=true;
                    return;
                }
                let params = new URLSearchParams();
                params.append("uname",this.uname);
                axios.post('isUnameValid.action',params).then(response =>{
                    if(response.data.code==0){
                        this.message=response.data.msg;
                        this.isError=true;
                        this.isvalid=true;
                    }
                    this.message='用户名可以使用';
                    this.isError=false;
                    this.isvalid=false;
                });
            },
            reg: function () {
                let params = new URLSearchParams();
                params.append("uname",this.uname);
                params.append("upwd",this.upwd);
                axios.post('reg.action',params).then(response =>{
                    if(response.data.code==0){
                        alert("注册失败,原因"+response.data.msg);
                        return;
                    }
                    alert("注册成功");
                });
            }
        }
    });
</script>

</body>

</html>
